<template>
  <!-- <div style="width:150px;">
    <h2>读码率统计</h2>
    <el-progress type="circle" :percentage="10"></el-progress>
    
  </div> -->
  
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>

</template>

<script>
  export default {
    data() {
      return {
        percentage: 10,
        colors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ]
      };
    },
    methods: {
      increase() {
        this.percentage += 10;
        if (this.percentage > 100) {
          this.percentage = 100;
        }
      },
      decrease() {
        this.percentage -= 10;
        if (this.percentage < 0) {
          this.percentage = 0;
        }
      }
    }
  }
</script>

<style scoped>
  h2{
    text-align: center;
    padding: 0px;
    font-size: 18px;
    }
</style>

